<template>
    <a-menu v-model:selectedKeys="current" mode="horizontal" @click="MenuClick" :items="items" />
    <!-- <router-link to="/">首页</router-link>
    <router-link to="sql">mysql授权用户</router-link> -->

    <router-view></router-view>
  </template>
  <script setup>
  import { h, ref } from 'vue';
  import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
  import { useRoute, useRouter } from 'vue-router'

  const route = useRoute()
  // console.log(route)
  const currentPath = route.path
  // console.error(route)
  let current = ref([route.name]);
  const items = ref([{
    key: 'tasks',
    icon: () => h(MailOutlined),
    label: '任务清单',
    title: '任务清单',
  }, {
    key: 'hello',
    icon: () => h(MailOutlined),
    label: '基础转换',
    title: '基础转换',
  }, {
    key: 'sql',
    icon: () => h(AppstoreOutlined),
    label: 'mysql授权用户',
    title: 'mysql授权用户',
  }, {
    key: 'crc',
    icon: () => h(AppstoreOutlined),
    label: 'crc生成',
    title: 'crc生成',
  }, {
    key: 'TuiEditor',
    icon: () => h(AppstoreOutlined),
    label: 'TuiEditor',
    title: 'TuiEditor',
  }, {
    key: 'Ssl',
    icon: () => h(AppstoreOutlined),
    label: 'Ssl',
    title: 'Ssl',
  }, {
    key: 'MilkdownEditor',
    icon: () => h(AppstoreOutlined),
    label: 'MilkdownEditor',
    title: 'MilkdownEditor',
  }
  // , {
  //   key: 'sub1',
  //   icon: () => h(SettingOutlined),
  //   label: 'Navigation Three - Submenu',
  //   title: 'Navigation Three - Submenu',
  //   children: [{
  //     type: 'group',
  //     label: 'Item 1',
  //     children: [{
  //       label: 'Option 1',
  //       key: 'setting:1',
  //     }, {
  //       label: 'Option 2',
  //       key: 'setting:2',
  //     }],
  //   }, {
  //     type: 'group',
  //     label: 'Item 2',
  //     children: [{
  //       label: 'Option 3',
  //       key: 'setting:3',
  //     }, {
  //       label: 'Option 4',
  //       key: 'setting:4',
  //     }],
  //   }],
  // }, {
  //   key: 'alipay',
  //   label: h('a', {
  //     href: 'https://antdv.com',
  //     target: '_blank',
  //   }, 'Navigation Four - Link'),
  //   title: 'Navigation Four - Link',
  // }
  ]);
  const router = useRouter()
  const MenuClick = (item, key, keyPath) => {
    router.push(current = item.key)
  }
  </script>